<template>
 <div class="one">
     <TopBar class="t" :url="'/one'"></TopBar>
     <div class="box">
         <h2>选择您的性别</h2>
         <div class="sex">
             <div ref="women" class="women">
                 <div>
                     <div></div>
                     <span></span>
                     <span></span>
                 </div>
                 <p>女性</p>
             </div>
             <span>or</span>
             <div ref="men" class="men">
                 <div>
                     <div></div>
                     <span></span>
                     <span></span>
                 </div>
                 <p>男性</p>
             </div>
         </div>
         <h2>请选择您的年龄</h2>
         <div class="mask-left"></div>
         <div class="mask-right"></div>
         <div class="age">
             <div class="num" ref="nums">
                 <span>0</span>
                 <span>1</span>
                 <span>2</span>
                 <span>3</span>
                 <span>4</span>
                 <span>5</span>
                 <span>6</span>
                 <span>7</span>
                 <span>8</span>
                 <span>9</span>
                 <span>10</span>
                 <span>11</span>
                 <span>12</span>
                 <span>13</span>
                 <span>14</span>
                 <span>15</span>
                 <span>16</span>
                 <span >17</span>
                 <span >18</span>
                 <span >19</span>
                 <span >20</span>
                 <span >21</span>
                 <span >22</span>
                 <span >23</span>
                 <span>24</span>
                 <span>25</span>
                 <span>26</span>
                 <span>27</span>
                 <span>28</span>
                 <span>29</span>
                 <span>30</span>
                 <span>31</span>
                 <span>32</span>
                 <span>33</span>
                 <span>34</span>
                 <span>35</span>
                 <span>36</span>
                 <span>37</span>
                 <span>38</span>
                 <span>39</span>
                 <span>40</span>
                 <span>41</span>
                 <span>42</span>
                 <span>43</span>
                 <span>44</span>
                 <span>45</span>
                 <span>46</span>
                 <span>47</span>
                 <span>48</span>
                 <span>49</span>
                 <span>50</span>
             </div>
         </div>
         <button @click="next">下一步 (2/3)</button>
     </div>
 </div>
</template>

<script>
    import TopBar from "../../component/TopBar";
    export default {
        name: "Step1",
        data(){
            return{
                set:null
            }
        },
        methods:{
            next(){
                this.$router.push('/three')
            }
        },
        components:{
            TopBar
        },
        mounted() {
            let offset=0,leave=""
            let num=this.$refs.nums
            let nums=Array.from(this.$refs.nums.children)
            num.addEventListener('touchstart',touchHandler)
            function touchHandler(e) {
                if (e.type==='touchstart'){
                    e.preventDefault()
                    document.addEventListener('touchend',touchHandler)
                    document.addEventListener('touchmove',touchHandler)
                    offset=e.changedTouches[0].clientX
                    document.div=this
                }else if (e.type==='touchmove'){
                    let way=e.changedTouches[0].clientX-offset
                    this.div.style.left=Math.abs(leave.slice(0,-3))+way/100+'rem'

                    parseInt(this.div.style.left) < -920 && (this.div.style.left = '-920px')
                    parseInt(this.div.style.left) > 900 && (this.div.style.left = '900px')
                }else{
                    leave=this.div.style.left
                    document.removeEventListener('touchend',touchHandler)
                    document.removeEventListener('touchmove',touchHandler)
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
.one
  width 100vw
  height 100vh
  background-color #ffffff
  .box
    text-align center
    position relative
    .mask-left
      position absolute
      width 0.4rem
      height 0.3rem
      background-color #ffffff
      left 0
      top 3rem
      z-index 10
    .mask-right
      position absolute
      top 3rem
      right 0
      height 0.3rem
      width 0.4rem
      background-color #ffffff
      z-index 10
    .age
       position relative
       &::after
         content ""
         position absolute
         top 0.27rem
         left 1.53rem
         border 0.02rem solid black
         width 0.65rem
         height 0.65rem
         border-radius 50%
         z-index 1
       .num
         position absolute
         margin 0.3rem 0 0.2rem 0.5rem
         width 2.7rem
         display flex
         z-index 2
         justify-content space-around
         span
           margin 0.18rem 0.12rem 0
        .xss
          color #7C8188
        .xs
          color #848A93
        .x
          color #757C86
        .big
          color #656D78
    button
      background-color #6739FE
      width 3.3rem
      height 0.45rem
      border-radius 0.2rem
      color #ffffff
      font-size 0.14rem
      font-weight 600
      border none
      cursor pointer
      margin-top 2.7rem
    .sex
      margin-top 0.25rem
      display flex
      justify-content center
      span
        margin-top 0.28rem
        font-size 0.12rem
        font-weight 600
      .women
        margin-right 0.35rem
        border-radius 50%
        border 0.02rem solid transparent
        background-color #6759DF
        width 0.75rem
        height 0.75rem
        > div
            cursor pointer
            position relative
            div
              width 0.25rem
              height 0.25rem
              border-radius 50%
              border 0.025rem solid #ffffff
              position absolute
              top 0.2rem
              left 0.25rem
            span:nth-of-type(1)
              position absolute
              width 0.02rem
              height 0.12rem
              top 0.17rem
              left 0.37rem
              background-color #ffffff
            span:nth-of-type(2)
              position absolute
              width 0.02rem
              height 0.1rem
              top 0.18rem
              left 0.37rem
              background-color #ffffff
              transform rotate(90deg)

        p
          margin-top 0.78rem
      .men
        margin-left 0.35rem
        width 0.75rem
        height 0.75rem
        border-radius 50%
        border 0.02rem solid black
        > div
            cursor: pointer;
            position relative
            div
                width 0.25rem
                height 0.25rem
                border-radius 50%
                border 0.025rem solid #656D78
                position absolute
                top 0.3rem
                left 0.23rem
            span:nth-of-type(1)
                position absolute
                width 0.02rem
                height 0.12rem
                top -0.1rem
                left 0.35rem
                background-color #656D78
            span:nth-of-type(2)
                position absolute
                width 0.12rem
                height 0.12rem
                border-left 0.025rem solid #656D78
                border-top 0.025rem solid #656D78
                top -0.1rem
                left 0.3rem
                background-color transparent
                transform rotate(45deg)
        p
          margin-top 0.78rem
    h2
      margin-top 0.2rem
      font-size 0.16rem
      font-weight 300
      &:nth-of-type(2)
        margin-top 1.1rem
  .t
    padding 0.2rem 0 0 0.2rem
</style>